<!-- 可控多选标签输入框（仅支持多选） -->
<template>
    <div class="relative width-all" style="height: 32px;">
        <div v-if="props.options && props.options.length > 0" class="simulation_box" style="" @click="clickInput">
            <el-space :size="[5,5]" class="margin-top-l">
                <el-tag closable effect="light" v-for="(rItem, rIndex) in selectedItems" size="small" :key="rItem" 
                    @close="regionTagClose(rItem, rIndex)">
                    {{ rItem.label }}
                </el-tag>
            </el-space>
            <p v-if="selectedItems.length <= 0" class="text-gray font-sm">{{ props.placeholder || '请选择' }}</p>
        </div>
        <el-input ref="dataSelectInput" v-model="defaultValue" clearable readonly :placeholder="placeholder || '请选择'" 
            style="width: 100%;" />
        <DataSelectUser v-model:show="userSelectShow" :options="options" :defaultValue="defaultUsers" :multiple="multiple" :max="max" type="ids" 
            @confirm="selectUserConfirm"></DataSelectUser>
    </div>
</template>
<script setup>
    import { ref, watch } from "vue"
    import DataSelectUser from "@/components/DataComponents/DataSelectUser.vue";
    const props = defineProps( [ 'options', 'ids', 'items', 'placeholder', 'state', 'control', 'multiple', 'max' ] );
    const emit = defineEmits( [ 'update:ids', 'update:items', 'remove', 'click' ] );
    const dataSelectInput = ref(null);
    const defaultValue = ref('')
    const selectedItems = ref([]);
    const userSelectShow = ref(false);
    const defaultUsers = ref([]);
    watch(() => props.ids, () => {
        if(props.ids){
            selectedItems.value = [];
            props.ids.map((id) => {
                props.options.map((item) => {
                    if(item.userId == id) selectedItems.value.push(item);
                });
            });
            selectedItems.value.map(item => {
                item.label = item.nickName;
                item.value = item.userId;
            })
        }
    }, { deep: true, immediate: true });
    watch(() => props.options, () => {
        if(props.ids){
            selectedItems.value = [];
            props.ids.map((id) => {
                props.options.map((item) => {
                    if(item.userId == id) selectedItems.value.push(item);
                });
            });
            selectedItems.value.map(item => {
                item.label = item.nickName;
                item.value = item.userId;
            })
        }
    }, { deep: true });
    watch(() => props.items, () => {
        selectedItems.value = props.items || [];
        if(props.items){
            emit('update:items', selectedItems.value);
        }
    }, { deep: true, immediate: true });
    const selectUserConfirm = (userIds, userItems) => {
        let selectItem = [];
        userItems.map(item => {
            selectItem.push({ label: item.nickName, value: item.userId });
        });
        selectedItems.value = selectItem;
        emit('update:ids', userIds);
        emit('update:items', selectItem);
    };
    // 手动打开下拉菜单
    const clickInput = () => {
        defaultUsers.value = props.ids || [];
        userSelectShow.value = true;
    };
    // 移除
    const regionTagClose = (item, index) => {
        // 是否可控
        if(props.control){
            return
        }
        selectedItems.value.splice(index, 1);
        emit('update:items', selectedItems.value);
        let ids = selectedItems.value.map((item) => item.value);
        emit('update:ids', ids);
    }
</script>
<style lang="scss" scoped>
    .simulation_box{
        position: absolute;
        left: 2px;top: 2px;
        z-index: 99;
        width: calc( 100% - 4px );
        border-radius: 5px;
        height: 29px;line-height: 29px;
        padding: 0 8px;
        background-color: #fff;
    }
</style>